<template>
  <div class="container">
    <div class="btns">
      <el-button
        @click="(add_menu.id = null), (add_menu.show = true)"
        type="primary"
        >Add</el-button
      >
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          height="650"
          row-key="id"
          border
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <!--          <el-table-column-->
          <!--            prop="menuId"-->
          <!--            label="菜单ID"-->
          <!--            width="180">-->
          <!--          </el-table-column>-->
          <el-table-column prop="name" label="平台" width="180">
            <template slot-scope="scope">
              <span>{{
                scope.row.useType == 0
                  ? "共用"
                  : scope.row.useType == 1
                  ? "总平台"
                  : scope.row.useType == 2
                  ? "Operator"
                  : scope.row.useType == 3
                  ? "区域Agent"
                  : "商家"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="菜单Name" width="180">
          </el-table-column>
          <el-table-column prop="parentName" label="上级菜单">
          </el-table-column>
          <el-table-column prop="type_des" label="Type"> </el-table-column>
          <el-table-column prop="url" label="菜单URL"> </el-table-column>
          <el-table-column prop="perms" label="授权标识"> </el-table-column>
          <el-table-column prop="perms" label="Operations">
            <template slot-scope="scope">
              <el-button @click="edit(scope.row)" type="text">Edit</el-button>
              <!--              <el-button @click="edit(scope.row,2)" type="text">Add</el-button>-->
              <el-button @click="sys_menu_delete(scope.row)" type="text"
                >Delete</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <add_menu
      :res="add_menu"
      v-if="add_menu.show"
      v-on:add_menu_call="add_menu_call"
    ></add_menu>
  </div>
</template>

<script>
import add_menu from "./cus/add_menu";
export default {
  components: {
    add_menu
  },
  data() {
    return {
      add_menu: {
        show: false,
        id: null,
        data: null,
        type: ""
      },
      tableData: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      var res = await this.apis.sys_menu_list();
      var menu_list = [];
      res.map((res, index) => {
        res.id = index + 1;
        res.type_des = res.type == 0 ? "目录" : res.type == 1 ? "菜单" : "按钮";
        if (res.type == 0) {
          res.children = [];
          menu_list.push(res);
        }
      });
      menu_list.map(res1 => {
        res.map(res2 => {
          if (res2.parentId == res1.menuId && res2.type == 1) {
            res2.children = [];
            res1.children.push(res2);
            res.map(res3 => {
              if (res3.type == 2 && res3.parentId == res2.menuId) {
                res2.children.push(res3);
              }
            });
          }
        });
      });

      menu_list.sort(function(a, b) {
        return a.useType - b.useType;
      });

      this.tableData = menu_list;
    },
    edit(row, t) {
      if (t == 2) {
        this.add_menu.type = t;
        this.add_menu.data = row;
      } else {
        this.add_menu.id = row.menuId;
      }
      this.add_menu.show = true;
    },
    sys_menu_delete(row) {
      this.$confirm("Confirm要删除吗?", "Hint", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning"
      })
        .then(() => {
          this.apis
            .sys_menu_delete({
              menuId: row.menuId
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "删除Success!"
              });
              this.getData();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已Cancel删除"
          });
        });
    },
    add_menu_call(res) {
      this.add_menu.show = false;
      if (res) {
        this.getData();
      }
    }
  }
};
</script>

<style scoped>
.table {
  margin-top: 20px;
}
</style>
